<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="font/iconfont.css">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="datavLayout" style="display: none;">
		<div class="datavTextLogo">
			<img src="images/729f36f3890a2cc2ec356285469a9a13.png" class="left">
			<div class="text">西宁市民生工程货币化资金发放大数据平台</div>
			<img src="images/a23ee39a3634282e941705925887ea97.png" class="left">
			<div class="time"></div>
		</div>
		<div class="img-box">
			<img src="images/385b13c1b7e06e91d8a8ec0357637505.png" alt="" class="img1">
			<img src="images/41e2f356b6dce301317bb2a7a66852f2.png" alt="" class="img2">
			<img src="images/eab3c95560a5d92c1025306bcf62ae88.png" alt="" class="img3">
			<img src="images/edd61a47dd4231803d255d11a16f7d28.png" alt="" class="img4">
		</div>

		<!-- <div class="top-data">
			<div class="inline-block">
				<div class="title">发放总人次</div>
				<div class="msg"><i class="grantTotal"></i><span>人</span></div>
			</div>
			<div class="inline-block">
				<div class="title">发放总金额</div>
				<div class="msg"><i class="grantMoney"></i><span>元</span></div>
			</div>
		</div> -->

		<!-- 左上角字符云图 -->
		<div class="lt-map">
			<div class="title">补贴项目分析</div>
			<div class="lt-word"></div>
		</div>
		<!-- 地图 -->
		<div class="xn-map"></div>
		<div class="xn-map-data">
			<div class="title">地区发放情况</div>
			<div class="msg">
				<div class="item">
					<h3>发放项目数</h3>
					<p><i class="num1"></i><span>个</span></p>
				</div>
				<div class="item">
					<h3>发放批次</h3>
					<p><i class="num2"></i><span>次</span></p>
				</div>
				<div class="item">
					<h3>发放人次</h3>
					<p><i class="num3"></i><span>次</span></p>
				</div>
				<div class="item">
					<h3>发放金额</h3>
					<p><i class="num4"></i><span>元</span></p>
				</div>
				<div class="item">
					<h3>覆盖人口</h3>
					<p><i class="num5"></i><span>人</span></p>
				</div>
			</div>
		</div>
		<!-- 左下角饼图 -->
		<div class="lb-map">
			<div class="title">近三年资金类别占比分析</div>
			<div class="lb-pie"></div>
		</div>
		<!-- 中下角折线柱状图 -->
		<!-- <div class="mb-map">
			<div class="title">当年发放情况</div>
			<div class="mb-bar"></div>
		</div> -->
		<!-- 右下角比例图 -->
		<div class="rb-map">
			<div class="title">近三年资金发放情况</div>
			<div class="rb-pie">
			</div>
		</div>
	</div>
	<style id="style"></style>
	<script id="cssTemp" type="text/html">
		.title{
			font-size: {{20*scale}}px;
			background: url(images/6ac43d2d83702455ade20bcd5fab3591.png) center bottom no-repeat;
			padding-bottom: {{15*scale}}px;
			min-width: {{230*scale}}px;
		    height: {{40*scale}}px;
		    background-size: 100% auto;
		    display: inline-block;
    		padding-right: 11px;
		}
		/*头部标题*/
		.datavTextLogo{
			position: absolute;
			top: {{16*scale}}px;
			left: 50%;
			transform: translate(-50%,0);
			width: {{1400*scale}}px;
			text-align: center;
		}
		.datavTextLogo div{
			display: inline-block;
			vertical-align: top;
		}
		.datavTextLogo .left, .datavTextLogo .right{
			display: inline-block;
			vertical-align: top;
			width: {{180*scale}}px;
		    height: {{35*scale}}px;
			margin: {{14*scale}}px {{20*scale}}px;
		}
		.datavTextLogo .text{
			background: url(images/b1d4dfdbfb66f2b4bc03a6c7d5b500ed.png) center bottom no-repeat;
			font-size: {{40*scale}}px;
			padding-bottom: {{15*scale}}px;
			background-size: 100% auto;
		}
		.datavTextLogo .time{
			display: block;
			text-align: center;
			font-size: {{30*scale}}px;
			padding-top: {{30*scale}}px;
		}
		.img-box img{
			position: absolute;
			width: {{180*scale}}px;
		    height: {{185*scale}}px;
		}
		.img-box .img1{
			left: {{16*scale}}px;
		    top: {{24*scale}}px;
		}
		.img-box .img2{
			right: {{16*scale}}px;
		    top: {{24*scale}}px;
		}
		.img-box .img3{
			left: {{16*scale}}px;
			bottom: {{16*scale}}px;
		}
		.img-box .img4{
			right: {{16*scale}}px;
			bottom: {{16*scale}}px;
		}
		/*头部数据*/
		.top-data{
			position: absolute;
			top: {{125*scale}}px;
			left: 50%;
			transform: translate(-50%,0);
		}
		.top-data .inline-block{
			margin: 0 {{90*scale}}px;
		}
		.top-data .msg{
			font-size: {{56*scale}}px;
			color: rgb(251, 243, 32);
		}
		.top-data .msg span{
			font-size: {{22*scale}}px;
		    color: #59ebe8;
		    vertical-align: middle;
		    margin-left: {{10*scale}}px;
		}
		/*左上角字符云*/
		.lt-map{
			position: absolute;
			right: {{80*scale}}px;
			bottom: {{50*scale}}px;
			width: {{450*scale}}px;
		}
		.lt-map .lt-word{
			height: {{360*scale}}px;
			width: {{500*scale}}px;
			margin: -{{0*scale}}px -{{30*scale}}px;
			position: relative;
			top: {{20*scale}}px
		}
		/*地图*/
		.xn-map{
			position: absolute;
			top: {{173*scale}}px;
			width: {{800*scale}}px;
			height: {{900*scale}}px;
			left: 50%;
			transform: translate(-50%,0);
		}
		.xn-map-data{
			position: absolute;
			right: {{30*scale}}px;
			top: {{240*scale}}px;
			width: {{500*scale}}px;
		}
		.xn-map-data .msg{
			margin-top: {{50*scale}}px;
		}
		.xn-map-data .item{
			display: inline-block;
			margin: 0 {{20*scale}}px {{45*scale}}px 0;
			width: {{140*scale}}px;
		    height: {{105*scale}}px;
		    background-image: url(images/13c890ebf14a1a23c168fc01e445932a.png);
		    background-repeat: no-repeat;
		    background-size: 100% 100%;
		    padding-left: {{16*scale}}px;
		}
		.xn-map-data .item h3{
			font-size: {{14*scale}}px;
			padding-top: {{20*scale}}px;
			padding-bottom: {{16*scale}}px;
		}
		.xn-map-data .item p{
			font-size: {{23*scale}}px;
			color: #59ebe8;
			width: {{180*scale}}px;
		}
		/*左下角饼图*/
		.lb-map{
			position: absolute;
			left: {{50*scale}}px;
			bottom: {{40*scale}}px;
		}
		.lb-map .lb-pie{
			height: {{360*scale}}px;
			width: {{500*scale}}px;
			position: relative;
			top: {{20*scale}}px
		}
		/*中下角折线柱状图*/
		.mb-map{
			position: absolute;
			left: 50%;
			transform: translate(-50%,0);
			bottom: {{20*scale}}px;
		}
		.mb-map .title{
			margin-left: {{50*scale}}px;
		}
		.mb-map .mb-bar{
			height: {{320*scale}}px;
			width: {{800*scale}}px;
			margin: -{{20*scale}}px -{{0*scale}}px;
		}
		/*右下角比例图*/
		.rb-map{
			position: absolute;
			left: {{65*scale}}px;
			top: {{240*scale}}px;
			width: {{500*scale}}px;
		}
		.rb-map .rb-pie{
			height: {{320*scale}}px;
			width: {{500*scale}}px;
			position: relative;
			top: {{20*scale}}px;
			left: -{{15*scale}}px;
		}
		.rb-map .item{
			padding: {{10*scale}}px 0;
			text-align: center;
		}
		.rb-map .item .msg{
			display: inline-block;
			vertical-align: middle;
			font-size: {{40*scale}}px;
			padding-top: {{35*scale}}px;
		}
		.rb-map .item .img{
			position: relative;
			display: inline-block;
			vertical-align: top;
			text-align:left;
		}
		.rb-map .item .img i{
			font-size: {{100*scale}}px;
			color: #ddd
		}
		.rb-map .item .pa{
			position: absolute;
			bottom: 0;
			overflow: hidden;
			width: {{80*scale}}px;
		}
		.rb-map .item .pa i{
			position: absolute;
			bottom: 0;
			color: #59ebe8;
		}
		.tip{
			font-size: {{24*scale}}px;
		}
	</script>
	<script src="lib/jquery-2.1.1.min.js"></script>
	<script src="lib/echarts.js"></script>
	<script src="lib/template.js"></script>
	<script src="index.js"></script>
</body>
</html>